<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body, div {
				margin: 0;
				padding: 0;
			}

			#div1 {
				float: left;
				margin-left: 100px;
				margin-top: 10px;
				width: 100px;
				height: 100px;
				background-color: #900;
				display: inline;/* only for IE */
			}

			#div2 {
				float: left;
				margin-left: 100px;
				margin-top: 10px;
				width: 150px;
				height: 100px;
				background-color: #090;
			}

			#div3 {
				width: 100px;
				height: 100px;
				background-color: #009;
				margin-left: 100px;
				margin-top: 10px;
			}

			.clear {
				clear: both; /* 在Chrome中，让后续的块重启一行 */
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<!--IE 在浮动中的一个bug
			只要同时满足这三个条件：
			1. 块元素
			2. float: left;
			3. margin-left 不为 0;
			margin-left 会double

		-->
		<div class="clear"></div>
		<div id="div3"></div>
	</body>
</html>
